/* 
    Document   : style
    Created on : Jun 6, 2012, 12:17:18 PM
    Author     : Student
    Description:
        Purpose of the stylesheet follows.
*/

body{
    background: black;
    background-size: 100%;

    margin:0 auto;
    min-height: 100%;


    /*   text-align: left;
     color: #000000;
     font: 12px Arial, Helvetica, sans-serif;
     font-size: 13px;
     margin: 0;
     padding: 0;
 background-size: contain;
    */
}

#topcontainer{


    height:250px;
    width:100%;

}  

#topbanner /* for top banner*/{
    background: url(../images/topbanner.jpg);
    background-size: auto auto;
    background-repeat: no-repeat;
    height:100%;


}




#topbanner a{ /*for login/logout button?*/
    float: right;
    float: top;
    position: relative;
    text-decoration:none;  
    margin: 4px;
    /*  padding: 5px 20px 5px 20px; */
    padding-right: 35px;
    padding-left: 35px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: blue;
    background: pink;
    width: 40px;
    text-align:  center;
    font-size: 17px;
    font-weight: bold;
    height:25px;

}


#topbanner a:hover {
    color: purple;
    background: yellow; 
}

#topbanner span{ /*for welcome message*/
    font-size: x-large;
    float: right;

}

#navmenu{

    background: url(../images/menunav.jpg);
    /*  background-repeat: no-repeat;*/
    color:#e8f9f7;
    display:block;
    float:top;
    clear:both;
    width:100% ;
    height:58px;
    clear:both;
}

#navmenu ul {
    margin: 0;
    padding: 0; 
    list-style-type: none;
    list-style-image: none;
}

#navmenu li {
    display: inline; 
}
#navmenu ul li a {
    text-decoration:none;  
    margin: 4px;
    padding: 5px 20px 5px 20px; 
    color: blue;
    background: pink;
}
#navmenu ul li a:hover {
    color: purple;
    background: yellow; 
}


/* column container */
#colmask {
    /* position:relative;	This fixes the IE7 overflow hidden bug 
     clear:both;
     float:left;
     width:100%;			width of whole page 
     overflow:hidden;		 This chops off any overhanging divs 
     
       height:100%;
    */
    width:100%;

    /*    background:#D9E6FF; */
    height: 100%;
    overflow:hidden;
    clear:both;
}

#bodymask {
    /* position:relative;	This fixes the IE7 overflow hidden bug 
     clear:both;
     float:left;
     width:100%;			width of whole page 
     overflow:hidden;		 This chops off any overhanging divs 
     
       height:100%;
    */
    margin: 0px;
    padding: 1%;
    position: relative;
    top: 0px;
    left: 0px;
    width: 1366px;

}

#leftmenu{


    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 1%;
    position: relative;
    /* background: url(../images/leftbar.jpg);*/
    /*  background-repeat: no-repeat;*/
    color:#e8f9f7;
    display:block;
    float:top;
    float:left;
    clear:both;
    width:15% ;
    height:100%;
    clear:both;

}

#leftlistcontainer{



   
    
    width: 100%;
    background: url(../images/leftbarcategory.png);
    background-size: auto auto;
    background-repeat: no-repeat;
    height:730px;

}

#leftmenu ul{
   
    padding: 5%; 
    width: 86%;
 height:100%;
    list-style-type: none;
    list-style-image: none;


}

#leftmenu ul li a {
    text-decoration:none;  
    margin: 4px;
    padding: 5px 20px 5px 20px; 
    color: blue;
    background: pink;
    height: 20px;
    display: block;
    text-align: center;
}

#leftmenu ul li a:hover {
    color: purple;
    background: yellow; 
}


#leftmenu #specials{

    display:block;
    position:relative;
    width: 86%;

    padding-top: 5%; 
padding-left: 5%; 
padding-right: 5%; 
    color: blue;
text-align: center;
    height:410px;
    background: url(../images/leftbarspecial.png);


}

#specials #special-header
{
    font-size: x-large;
  

}
#specials img{
    padding-left: 3%;
    height: 120px;
    width: 120px;

}
#specials #special-title{
    text-align: center;
    font-size: large;
    padding: 7px 7px 7px 7px;

}
#specials #special-artist{
    text-align: center;
    font-size: medium;
    padding: 7px 7px 7px 7px;

}

#rightmenu{


    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    position: relative;
  float:top;
    float:right;
    width:15% ;
    height:100%;

}

#rightlistcontainer{
padding-left: 8%;
    width: 100%;
    background: url(../images/rightbarcategory.png);
    background-size: auto auto;
    background-repeat: no-repeat;
    height:1150px;

}





#itunewindow{
    background:#7CADCA;
    color:black;
    float:left;
    width:63.6%;
    padding:10px;
    height:100%;
    min-height: 1200px;
    position: relative;

    /*
        display:block;
        float:right;
        clear:both;
        width:60%;
        height:100%;
        border-top: solid yellow;
        border-right: solid yellow;
        border-bottom: solid yellow;
        border-left: solid yellow;
    */
    /*  left:102%;			 100% plus left column left padding */

    /*  width:70%;	*/		/* left column content width (column width minus left and right padding) */
    /*  left:6%;	*/

    /*   position:relative;*/

    /* padding:0 0 1em 0;    */
    /*   overflow:hidden;*/  /* (right column left and right padding) plus (left column left padding) */

}


#btnBuy{


    float : right;
}


.question_slide{	/* Styling question */
    /* Start layout CSS */

    background: #C0B194;
    color:whitesmoke;
    font-size:0.9em;
    background-color:#317082;
    width:50%;
    margin-bottom:2px;
    margin-top:2px;
    padding-left:2px;

    height:30px;

    font-size: 15px;


    /* End layout CSS */
    /*
           overflow:hidden;
    */
    cursor:pointer;
}
.topweekly{	/* Parent box of slide down content */
    /* Start layout CSS */
    border:1px solid #317082;
    background:#fff3ef;
    width:70%;

    /* End layout CSS */


    height:100%;
    overflow:hidden;
    position:relative;

}
.answer{	/* Parent box of slide down content */
    /* Start layout CSS */
    border:1px solid #317082;
    background:#fff3ef;
    width:70%;

    /* End layout CSS */

    visibility:hidden;
    height:0px;
    overflow:hidden;
    position:relative;

}
.answer .songcover{

    height:150px;
    width:150px;
    alignment-adjust: middle;
}


#itunewindow #lyrics #lyrichead{
    
    font-size: 30px;
    
}

#itunewindow #lyrics #lyricshow{
    
    font-size: 20px;
    
}

 .sort{
   padding-left: 30px; 
    font-size: 20px;
    
}


#btnEdit{
    float:right;
}

#footer {
    clear:both;
    padding:5px 10px;
    background:#FBB5DD;
}
#footer p {
    margin:0;
}
* html #footer {
    height:1px;
}
